<template>
  <div class="login">
    <div class="login-wrap">
      <div class="login-wrap__title">
        <span>有灵虚拟人智慧大屏</span>
        <div class="tip truncate">
          <span v-show="showErr">{{ errMsg }}</span>
        </div>
      </div>
      <div class="login-wrap__input">
        <login-input type="text" :err="errMsg" placeholder="账号" v-model="form.account" />
      </div>
      <div class="login-wrap__input">
        <login-input type="password" :err="errMsg" placeholder="密码" v-model="form.password" />
      </div>
      <div class="login-wrap__btn">
        <login-button @click="submit(() => $emit('submit'))">{{loading ? '登录中...' : '登录'}}</login-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="DesktopLogin" setup>
  import useLoginForm  from '@/hooks/useLoginForm'
  
  const { showErr, loading, errMsg, form, submit } = useLoginForm()

  defineEmits(['submit'])

</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('ets/images/desktop/login_bg.png');
  box-sizing: border-box;
  color: #FFFFFF;
  overflow: hidden;
  &-wrap {
    width: 400px;
    height: 255px;
    text-align: center;
    position: absolute;
    transform: translate(-50%, -77%);
    top: 50%;
    left: 50%;
    padding: 30px 26px 20px;
    background: rgba(27, 96, 246, 0.17);
    box-sizing: border-box;
    &__title {
      font-size: 16px;
      height: 40px;
      position: relative;
      .tip {
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        font-size: 10px;
        line-height: 14px;
        text-align: center;
        color: #FFFFFF;
        opacity: 0.6;
      }
    }
    &__input {
      margin-bottom: 10px;
    }
    &__btn {
      margin-top: 30px;
    }
  }
}
</style>